<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>乘客信息</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="__PUBLIC__/Css/my.css" rel="stylesheet">

    <script src="__PUBLIC__/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #f0f0f0;">
<div class="container">
    <include file="Public:top" title="乘客信息"/>
    <!--topbar ends here-->

    <div class="row psg-bn-group" align="center">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-offset-2"
             onclick="onAdd()"
             style="background-color: #cccccc;border-radius: 5px;color: white;padding: 5px 0px 5px 0px;">
            <img src="__PUBLIC__/images/add-25.png">新增乘客
        </div>
    </div>
    <!--taker list foreach goes here-->
    <div id="buyer-list">
        <empty name="buyerlist">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center" style="color:gray;">
                    无乘车人信息
                </div>
            </div>
            <else/>
            <foreach name="buyerlist" item="buyer">
                <div class="row psg-taker-item" id="item-{$buyer.id}">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                        姓名:<span style="color:gray;" id="{$buyer.id}-name">{$buyer.name}</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                        手机:<span style="color:gray;" id="{$buyer.id}-phone">{$buyer.phone}</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                        身份证:<span style="color:gray;" id="{$buyer.id}-identity">{$buyer.identity}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="margin-top: 10px;;">
                                <img src="__PUBLIC__/images/modify-25.png" class="order-img"
                                     onclick="onModify('{$buyer.id}')">
                                <img src="__PUBLIC__/images/delete-25.png" class="order-img"
                                     style="background-color: #d9544f" onclick="onDelete('{$buyer.id}')">
                            </div>
                        </div>
                    </div>
                </div>
            </foreach>
        </empty>
    </div>
</div>
<!--进度图片-->
<include file="Public:progress"/>

<!-- 修改乘客信息模态框 -->
<div class="modal fade" id="modify-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:20%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">修改信息</h4>
            </div>
            <div class="modal-body"
                 style="height:200px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        姓名:
                        <input type="text" value="" class="none-input" id="modify-name">
                        <input type="hidden" value="" class="none-input" id="modify-name-old">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('modify-name')"></span>
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        手机:
                        <input type="text" value="" class="none-input" id="modify-phone">
                        <input type="hidden" value="" class="none-input" id="modify-phone-old">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('modify-phone')"></span>
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        身份证:
                        <input type="text" value="" class="none-input" id="modify-identity">
                        <input type="hidden" value="" class="none-input" id="modify-identity-old">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('modify-identity')"></span>
                    </div>
                </div>
                <input type="text" value="" hidden id="modify-id">
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-primary" onclick="onModifySubmit()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--add dialog-->
<div class="modal fade" id="add-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:20%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">添加乘客</h4>
            </div>
            <div class="modal-body"
                 style="height:200px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        姓名:
                        <input type="text" class="none-input" placeholder="姓名" id="add-name">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('add-name')"></span>
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        手机:
                        <input type="text" class="none-input" placeholder="手机号码" id="add-phone">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('add-phone')"></span>
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        身份证:
                        <input type="text" class="none-input" placeholder="身份证号" id="add-identity">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="float:right" onclick="clearInput('add-identity')"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-primary" onclick="onAddSubmit()">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function onAdd() {
        $("#add-dialog").modal('show');
    }
    function clearInput(id){
        $("#" + id).val('');
    }
    function onAddSubmit() {
        $("#add-dialog").modal('hide');
        if (!checkInfo('add-name', 'add-phone', 'add-identity')) {
            return;
        }
        showProgress();

        var name = $("#add-name").val();
        var phone = $("#add-phone").val();
        var identity = $("#add-identity").val();

        var param = {
            name: name,
            phone: phone,
            identity: identity
        };

        $.ajax({
            type: 'post',
            dataType: 'json',
            url: "{:U('Account/add')}",
            data: param,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                hideProgress();
                if (json.status == "fail") {
                    alert(json.msg);
                    return;
                }
                //插入元素
                var html = '';
                html += '<div class="row psg-taker-item" id="item-'+ json.id +'">';
                html += '   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
                html += '       <div class="row">';
                html += '	        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">';
                html += '		        <div class="row">';
                html += '			        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">';
                html += '				        姓名:<span style="color:gray;" id="' + json.id + '-name">';
                html += json.name;
                html += '                       </span>';
                html += '			        </div>';
                html += '		        </div>';
                html += '		        <div class="row">';
                html += '			        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">';
                html += '			        	手机:<span style="color:gray;" id="' + json.id + '-phone">';
                html += json.phone;
                html += '                     </span>';
                html += '			        </div>';
                html += '		        </div>';
                html += '		        <div class="row">';
                html += '		        	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">';
                html += '			        	身份证:<span style="color:gray;" id="' + json.id + '-identity">';
                html += json.identity;
                html += '                      </span>';
                html += '			        </div>';
                html += '		        </div>';
                html += '	        </div>';
                html += '	        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="margin-top: 10px;">';
                html += '		        <img src="__PUBLIC__/images/modify-25.png" class="order-img" onclick="onModify(' + "'" + json.id + "'" + ')">';
                html += '		        <img src="__PUBLIC__/images/delete-25.png" class="order-img" style="background-color: #d9544f" onclick="onDelete(' + "'" + json.id + "'" + ')">';
                html += '	        </div>';
                html += '       </div>';
                html += '   </div>';
                html += '</div>';

                $("#buyer-list").prepend(html);//插入最前面
                clearAdd();
            },
            error: function () {
                hideProgress();
                alert("添加失败,请检查网络!");
            }
        });
    }
    /**
     * clear all the values in the add-dialog,supposed to be invoked after add successfully
     */
    function clearAdd() {
        $("#add-name").val('');
        $("#add-phone").val('');
        $("#add-identity").val('');
    }

    function onDelete(buyerId) {
        if (!confirm("确定删除?")) {
            return;
        }
        showProgress();
        //alert(buyerId);return;
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{:U('Account/delete')}",
            data: "id=" + buyerId,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                hideProgress();
                if (json.status == 0) {
                    alert(json.msg);
                } else {
                    $("#item-" + buyerId).css("display", "none");
                }
            },
            error: function (msg) {
                hideProgress();
                alert("删除失败,请检查网络");
            }
        });
    }

    function onModify(buyerId) {
        var name = $("#" + buyerId + "-name").text();
        var phone = $("#" + buyerId + "-phone").text();
        //alert(phone);
        var identity = $("#" + buyerId + "-identity").text();
        setModifyField(buyerId, name, phone, identity);
        $("#modify-dialog").modal('show');
    }

    function setModifyField(id, name, phone, identity) {
        $("#modify-id").val(id);
        $("#modify-name").val(name);
        $("#modify-phone").val(phone);
        $("#modify-identity").val(identity);
        $("#modify-name-old").val(name);
        $("#modify-phone-old").val(phone);
        $("#modify-identity-old").val(identity);
    }

    function onModifySubmit() {
        //是否修改内容
        if (($("#modify-name-old").val() == $("#modify-name").val() && $("#modify-phone").val() == $("#modify-phone-old").val() && $("#modify-identity").val() == $("#modify-identity-old").val())) {
            $("#modify-dialog").modal('hide');
            return;
        }
        //输入是否合法
        if (!checkInfo('modify-name', 'modify-phone', 'modify-identity')) {
            return;
        }
        showProgress();
        $("#modify-dialog").modal('hide');
        $.ajax({
            type: 'POST',
            dataType: "json",
            url: "{:U('Account/modify')}",
            data: "id=" + $("#modify-id").val() + "&name=" + $("#modify-name").val() + "&phone=" + $("#modify-phone").val() + "&identity=" + $("#modify-identity").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                if (json.status == 0) {
                    hideProgress();
                    alert('修改失败');
                } else {
                    hideProgress();
                    $("#" + $("#modify-id").val() + "-name").html(json.new.name);
                    $("#" + $("#modify-id").val() + "-phone").html(json.new.phone);
                    $("#" + $("#modify-id").val() + "-identity").html(json.new.identity);
                }
            },
            error: function (msg) {
                hideProgress();
                alert('修改错误,请检查网络');
            }
        });
    }
</script>
</body>
</html>